<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>个人中心 - 【少儿编程教学平台】</title>
    <link rel="icon" href="/img/logo.png">
    <link rel="stylesheet" type="text/css" href="/css/sPersonal-teacher.css">
    <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="/js/layer/layer.js"></script>

</head>
<body>

<div class="headerpage"></div>

<!-------------------------- 背景图片------------------------- -->

<div class="content-back">
    <c:choose>
        <c:when test="${empty sessionScope.TeacherInfo.timg }">
            <img class="back-pic" src="/img/logo.png">
        </c:when>
        <c:otherwise>
            <img class="back-pic" src="${sessionScope.TeacherInfo.timg }">
        </c:otherwise>
    </c:choose>
</div>


<!---------------------------- 内容区---------------------------- -->

<div class="content">
    <div class="content-kuang">
        <c:choose>
            <c:when test="${!empty sessionScope.TeacherInfo.timg }">
                <img src="${sessionScope.TeacherInfo.timg }" class="kuang-img">
                <form action="tupdate.action" method="post" id="img-update" enctype="multipart/form-data">
                    <input type="hidden" name="tid" value="${ sessionScope.TeacherInfo.tid }">
                    <input type="file" name="myfile" class="img-update">
                    <img src="/img/camera.png" class="camera">
                </form>
            </c:when>
            <c:otherwise>
                <img src="/img/logo.png" class="kuang-img">
                <form action="tupdate.action" method="post" id="img-update" enctype="multipart/form-data">
                    <input type="hidden" name="tid" value="${ sessionScope.TeacherInfo.tid }">
                    <input type="file" name="img" class="img-update">
                    <img src="/img/camera.png" class="camera">
                </form>
            </c:otherwise>
        </c:choose>
        <span class="name">用户名：${sessionScope.TeacherInfo.tname }</span>
        <div class="marker-update"></div>
        <form>
            <input type="hidden" name="tid" value="${ sessionScope.TeacherInfo.tid }">
            <div class="tname">
                <span class="keep-name">用户名：</span>
                <input class="tname-input" type="text" name="tname" placeholder="请输入新的用户名">
            </div>
        </form>
        <div class="keep"></div>
    </div>
</div>

<div class="center">
    <div class="center-kuang">
        <ul class="center-ul">
            <li class="focus data">
                <a style="font-size:19px;">个人信息</a>
            </li>
            <li class="blur update">
                <a style="font-size:19px;">修改信息</a>
            </li>
            <li class="blur">
                <a href="sUpdate-teacher" style="font-size:19px;">修改密码</a>
            </li>

            <li class="blur">
                <a href="sEdit" style="font-size:19px;">发布文章</a>
            </li>
            <li class="blur">
                <a href="sEdit" style="font-size:19px;">发布视频</a>
            </li>


        </ul>
    </div>
</div>
<div class="message">
    <div class="message-content">

        <div class="message-phone" style="top:0px;left:170px">
            手机号码:
        </div>

        <div class="phone" style="top:0px;left:360px">
            ${sessionScope.TeacherInfo.tphone }
        </div>

        <div class="message-phone" style="top:70px;left:170px">
            地区:
        </div>

        <div class="phone" style="top:70px;left:360px">
            <c:choose>
                <c:when test="${empty sessionScope.TeacherInfo.taddress}">
                    <span class="click">点击这里添加地址</span>
                </c:when>
                <c:otherwise>
                    ${ sessionScope.TeacherInfo.taddress }
                </c:otherwise>
            </c:choose>
        </div>

        <div class="message-phone" style="top:140px;left:170px">
            性别:
        </div>

        <div class="phone" style="top:140px;left:360px">
            <c:choose>
                <c:when test="${empty sessionScope.TeacherInfo.tgender}">
                    <span class="click">点击这里添加性别</span>
                </c:when>
                <c:otherwise>
                    ${ sessionScope.TeacherInfo.tgender }
                </c:otherwise>
            </c:choose>

        </div>
    </div>
</div>

<div class="updatemessage">
    <div class="update-content">
        <form action="tupdate.action" method="post" id="update">
            <input type="hidden" name="tid" value="${ sessionScope.TeacherInfo.tid }">
            <div class="update-phone" style="top:0px;left:170px">
                手机号码:
            </div>
            <div class="update-pho" style="top:0px;left:360px">
                <input type="text" class="input" placeholder="${ sessionScope.TeacherInfo.tphone }">

            </div>

            <div class="update-phone" style="top:70px;left:170px">
                地区:
            </div>
            <div class="update-pho" style="top:70px;left:360px">
                <input type="text" class="input" placeholder="${ sessionScope.TeacherInfo.taddress }">

            </div>

            <div class="update-phone" style="top:140px;left:170px">
                性别:
            </div>
            <div class="update-pho" style="top:140px;left:360px">
                <c:choose>
                    <c:when test="${ sessionScope.TeacherInfo.tgender =='女' }">
                        男<input type="radio" value="男" name="gender" class="radio" >
                        女<input type="radio" value="女" name="gender" class="radio" checked>
                    </c:when>
                    <c:otherwise>
                        男<input type="radio" value="男" name="gender" class="radio" checked>
                        女<input type="radio" value="女" name="gender" class="radio">
                    </c:otherwise>
                </c:choose>
            </div>

        </form>
        <button type="button" class="btn-update">保存</button>
    </div>
</div>
<div class="footerpage"></div>

<script>

    $(function () {
        $(".headerpage").load("header.jsp");
        $(".footerpage").load("footer.jsp");

        $(".center-ul li").mouseover(function () {

            $(".center-ul li").removeClass("focus").addClass("blur");
            $(this).removeClass("blur").addClass("focus");

        })

        $(".data").click(function () {
            $(".message").css("display", "block");
            $(".updatemessage").css("display", "none");
        })

        $(".update").click(function () {
            $(".updatemessage").css("display", "block");
            $(".message").css("display", "none");
        })

        $(".click").click(function () {
            $(".updatemessage").css("display", "block");
            $(".message").css("display", "none");
        })

        $(".marker-update").click(function () {
            $(".keep").css("display", "block");
            $(".tname").css("display", "block");
            $(".keep-name").css("display", "block");
            $(".marker-update").css("display", "none");
            $(".name").css("display", "none");
        })


        $(".button-update").click(function () {

            $("#update").submit();

        })

        $(".keep").click(function () {
            $.ajax({
                type: 'post',
                url: 'updateTnameTeacher.action',
                data: {
                    "tname": $("[name='tname']")[0].value,
                    "tid": $("[name='tid']")[0].value

                },

                contentType: "application/x-www-form-urlencoded",

                dataType: 'text',

                success: function (data) {
                    layer.alert(data, {
                        skin: 'layui-layer-lan'
                        , closeBtn: 0
                        , anim: 4
                    });
                    $.ajax({
                        type: 'post',
                        url: 'tRefind.action',
                        data: {

                            "tid": $("[name='tid']")[0].value

                        },

                        contentType: "application/x-www-form-urlencoded",

                        dataType: 'text',

                        success: function (data) {
                            layer.alert(data, {
                                skin: 'layui-layer-lan'
                                , closeBtn: 0
                                , anim: 4
                            });
                            window.location.href = 'tRefind.action';
                        },

                        error: function (data) {
                            console.log("请求失败");
                        }


                    })
                },

                error: function (data) {
                    console.log("请求失败");
                }


            })

        })

        $("img-update").click(function () {
            $("#img-update").submit;
        })

        $(".img-update").mouseover(function () {
            $(".camera").css("opacity", "0.9");
        })

        $(".img-update").mouseout(function () {
            $(".camera").css("opacity", "0");
        })

    })
</script>

</body>
</html>